<template>
	<div>
		<el-card class="box-card">
			<el-form :inline="true" :model="tableParams" class="user-search">
				<el-form-item label="">
					<el-input size="small" v-model="tableParams.name" placeholder="输入"></el-input>
				</el-form-item>
				
				<el-form-item>
					<el-button size="small" type="primary" icon="el-icon-search" @click="search" round>搜索</el-button>
					<el-button size="small" type="primary" icon="el-icon-plus" @click="handleInsert"
						round>添加</el-button>
					<!-- <el-button size="small" type="primary" @click="handleunit()">部门设置</el-button> -->
				</el-form-item>
			</el-form>
		</el-card>


		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="name" label="名称" width="120">
			</el-table-column>
			<el-table-column prop="code" label="编码值" width="120">
			</el-table-column>
			<el-table-column sortable prop="descript" label="描述" width="300">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="300">
			</el-table-column>
			<el-table-column prop="sstatus" label="状态" width="120">
			</el-table-column>
			<el-table-column align="center" label="操作" min-width="300">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"
						round>编辑</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"
						round>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div>
			<!-- 使用分页组件 -->
			<Pagination :tableParams="tableParams" @size-change="onPageSizeChange"
				@current-change="onCurrentPageChange" />
		</div>

		<!-- 用户导入对话框 -->
		<el-dialog :title="title" :visible.sync="iustatus">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="编码值" prop="code">
					<el-input v-model="form.code" oninput="value=value.replace(/[^0-9]/g,'')" placeholder="只能是整数"></el-input>
				</el-form-item>
				<el-form-item  label="描述" width="300">
					<el-input v-model="form.descript"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
					<el-button @click="resetForm('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {
		list,
		getById,
		insert,
		update,
		deleteIds
	} from '@/api/system/dictinfo';
	export default {
		data() {
			return {
				iustatus: false,
				title: '',
				upstatus: false,
				//修改编辑
				form: {},
				rules: {
					name: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}]
				},
				//表格数据
				tableData: [],
				//分页
				tableParams: {
					pageNum: 1, // 当前页码
					pageSize: 20, // 每页显示的数量
					total: 100, // 数据总条数
					name: "",
					dictId: "",
				},
			}

		},
		created() {
			const { dictId } = this.$route.query;
			 if (dictId) {
			      this.tableParams.dictId = dictId;
			      localStorage.setItem('tableParams', JSON.stringify(this.tableParams));
			    } else {
			      const storedParams = localStorage.getItem('tableParams');
			      if (storedParams) {
			        this.tableParams = JSON.parse(storedParams);
			      }
			    }
			this.getDatailist();
		},
		methods: {
			//查询
			search() {
				this.getDatailist();
			},
			//编辑
			handleEdit(row) {
				this.iustatus = true;
				this.upstatus = true;
				this.title = "修改";
				this.form = row;
			},
			//删除
			handleDelete(row) {
				
					this.$confirm('此操作将永久删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						deleteIds(row.id)
							.then((res) => {
								if (res.code == 200) {
									this.getDatailist();
									this.iustatus = false;
									this.form = {}
								} else {
									this.logining = false
								}
							})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			//添加
			handleInsert() {
				this.iustatus = true;
				this.title = "添加";
				this.form = {};

			},

			//添加修改
			submitForm(formName) {
				this.form.dictId = this.tableParams.dictId
				if (this.upstatus) {

					update(this.form)
						.then((res) => {

							if (res.code == 200) {
								this.getDatailist();
								this.iustatus = false;
								this.form = {}
							} else {
								this.logining = false
							}
						})
					this.iustatus = false;
					this.upstatus = false;
				} else {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							insert(this.form)
								.then((res) => {

									if (res.code == 200) {
										this.getDatailist();
										this.iustatus = false;
										this.form = {}
									} else {
										this.logining = false
									}
								})
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				}

			},

			//重置
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},

			//查询
			getDatailist() {
				list(this.tableParams)
					.then((res) => {
						if (res.code == 200) {
							this.tableData = res.data.records
							this.tableParams.pageNum = res.data.current, // 当前页码
								this.tableParams.pageSize = res.data.size
							this.tableParams.total = res.data.total
						} else {
							this.logining = false
						}
					})
			},
			onPageSizeChange(newPageSize) {
				// 更新每页显示的数量
				this.tableParams.pageSize = newPageSize;
				// 如果需要，可以在这里执行API调用来获取新的数据
			},
			onCurrentPageChange(newPageNum) {
				// 更新当前页码
				this.tableParams.pageNum = newPageNum;
				// 如果需要，可以在这里执行API调用来获取新的数据
			},
			
			//跳转到详情页
			send(id) {
				this.$router.push({
					name: 'dictinfo',
					query: {
						dictId: id
					}
				})
			},

		}
	}
</script>
<style>
	.scrollable-table {
		height: 300px;
		overflow-y: auto;
		table-layout: auto;
		/* 取消固定布局 */
	}
</style>